<template>
	<view>
		<view class="column">
			<view class="list2" @click="goTo(`../newsDetails/newsDetails?id=${item.id}`)" v-for="(item,index) in list" :key="index">
				<!-- <image src="https://staticfile-yj.obs.myhuaweicloud.com/arcimg/%E9%85%8D%E5%9B%BE1.png"
					mode="aspectFill"></image> -->
				<view class="image" v-if="item.image">
					<image :src="listImgUrl + item.image + '?x-image-process=style/style-list'" mode="widthFix"></image>
				</view>
				<view class="image" v-else>
					<image src="https://staticfile-yj.obs.cn-north-4.myhuaweicloud.com/none.png" mode="widthFix">
					</image>
				</view>
				<view class="list-con">
					<text class="text">{{item.title}}</text>
					<view class="info">
						<view><uni-icons type="calendar" size="12" color="#9498A0"></uni-icons><text>{{item.publishTime}}</text>
						</view>
						<view><uni-icons type="eye" size="12" color="#9498A0"></uni-icons><text>{{item.browseNum}}</text></view>
					</view>
				</view>
			</view>
			<view class="uni-loadmore" v-if="showLoadMore">加载中...</view>
			<!-- <view class="list2" @click="goTo('../newsDetails/newsDetails')">
				<image src="https://staticfile-yj.obs.myhuaweicloud.com/arcimg/%E9%85%8D%E5%9B%BE2.png"
					mode="aspectFill"></image>
				<view class="list-con">
					<text class="text">农业农村部、工业和信息化部召开支持农机和种业发展座谈会</text>
					<view class="info">
						<view><uni-icons type="calendar" size="12" color="#9498A0"></uni-icons><text>2023-04-23</text>
						</view>
						<view><uni-icons type="eye" size="12" color="#9498A0"></uni-icons><text>1234</text></view>
					</view>
				</view>
			</view>
			<view class="list2" @click="goTo('../newsDetails/newsDetails')">
				<image src="https://staticfile-yj.obs.myhuaweicloud.com/arcimg/%E9%85%8D%E5%9B%BE3.png"
					mode="aspectFill"></image>
				<view class="list-con">
					<text class="text">农业农村部、工业和信息化部召开支持农机和种业发展座谈会</text>
					<view class="info">
						<view><uni-icons type="calendar" size="12" color="#9498A0"></uni-icons><text>2023-04-23</text>
						</view>
						<view><uni-icons type="eye" size="12" color="#9498A0"></uni-icons><text>1234</text></view>
					</view>
				</view>
			</view>
			<view class="list2" @click="goTo('../newsDetails/newsDetails')">
				<image src="https://staticfile-yj.obs.myhuaweicloud.com/arcimg/%E9%85%8D%E5%9B%BE1.png"
					mode="aspectFill">
				</image>
				<view class="list-con">
					<text class="text">农业农村部、工业和信息化部召开支持农机和种业发展座谈会</text>
					<view class="info">
						<view><uni-icons type="calendar" size="12" color="#9498A0"></uni-icons><text>2023-04-23</text>
						</view>
						<view><uni-icons type="eye" size="12" color="#9498A0"></uni-icons><text>1234</text></view>
					</view>
				</view>
			</view>
			<view class="list2" @click="goTo('../newsDetails/newsDetails')">
				<image src="https://staticfile-yj.obs.myhuaweicloud.com/arcimg/%E9%85%8D%E5%9B%BE2.png"
					mode="aspectFill">
				</image>
				<view class="list-con">
					<text class="text">农业农村部、工业和信息化部召开支持农机和种业发展座谈会</text>
					<view class="info">
						<view><uni-icons type="calendar" size="12" color="#9498A0"></uni-icons><text>2023-04-23</text>
						</view>
						<view><uni-icons type="eye" size="12" color="#9498A0"></uni-icons><text>1234</text></view>
					</view>
				</view>
			</view>
			<view class="list2" @click="goTo('../newsDetails/newsDetails')">
				<image src="https://staticfile-yj.obs.myhuaweicloud.com/arcimg/%E9%85%8D%E5%9B%BE3.png"
					mode="aspectFill">
				</image>
				<view class="list-con">
					<text class="text">农业农村部、工业和信息化部召开支持农机和种业发展座谈会</text>
					<view class="info">
						<view><uni-icons type="calendar" size="12" color="#9498A0"></uni-icons><text>2023-04-23</text>
						</view>
						<view><uni-icons type="eye" size="12" color="#9498A0"></uni-icons><text>1234</text></view>
					</view>
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	import {
		baseurl,
		appListNewsInfo,
	} from "@/api/user.js"
	let listImgUrl = "https://nongmao.obs.cn-north-4.myhuaweicloud.com/"
	export default {
		data() {
			return {
				listImgUrl,
				nvueWidth: 730,
				list:[],
				page:0,
				maxpage:0,
				showLoadMore:false,
				listId:'',
			};
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			console.log(option.id); //打印出上个页面传递的参数。
			this.listId = option.id
			this.initData();
		},
		onPullDownRefresh() {
			console.log('onPullDownRefresh')
			this.initData();
		},
		onReachBottom() {
			console.log("onReachBottom");
			console.log("page", this.page, this.maxpage)
			if (this.page >= this.maxpage) {
				this.showLoadMore = false;
				return
			}
			this.showLoadMore = true;
			this.page++;
			this.appListNewsInfo({ //参数
				condition: {
					newsTabCode: this.listId,
				},
				pageNum: this.page,
				pageSize: 10
			});
		},
		methods: {
			async appListNewsInfo(options) {
				const res = await appListNewsInfo(options);
				console.log(res)
				this.list = this.list.concat(res.returnObj.list);
				this.showLoadMore = false;
			},
			initData() {
				this.page = 1;
				this.list = [];
				this.showLoadMore = true;
				let obj = {
					condition: {
						newsTabCode: this.listId, //新闻页签编号
					},
					pageNum: this.page,
					pageSize: 10
				}
				this.appListNewsInfo(obj);
				uni.stopPullDownRefresh();
			},
			goTo(e) {
				var url = e;
				uni.navigateTo({
					url: url
				})
			},
			toggle(type) {
				this.type = type
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open(type)
			},
			onTabBarChange(index) {
				this.activeIndex = index;
			},

			ontabtap(e) {
				let index = e.target.dataset.current || e.currentTarget.dataset.current;
				this.switchTab(index);
			},

			ontabchange(e) {
				let index = e.target.current || e.detail.current;
				this.switchTab(index);
			},

			switchTab(index) {
				/* 				if (this.newsList[index].data.length === 0) {
									this.getList(index);
								}
				 */
				if (this.tabIndex === index) {
					return;
				}

				// 缓存 tabId
				// if (this.newsList[this.tabIndex].data.length > MAX_CACHE_DATA) {
				// 	let isExist = this.cacheTab.indexOf(this.tabIndex);
				// 	if (isExist < 0) {
				// 		this.cacheTab.push(this.tabIndex);
				// 		//console.log("cache index:: " + this.tabIndex);
				// 	}
				// }

				this.tabIndex = index;
				this.scrollInto = this.tabBars[index].id;

				// 释放 tabId
				// if (this.cacheTab.length > MAX_CACHE_PAGE) {
				// 	let cacheIndex = this.cacheTab[0];
				// 	this.clearTabData(cacheIndex);
				// 	this.cacheTab.splice(0, 1);
				// 	//console.log("remove cache index:: " + cacheIndex);
				// }
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #ffffff;
	}

	.reset {
		background-color: #F0F1F1;
		border: none;
		font-size: 28rpx;
		border: none !important;
	}

	.footer {
		padding: 20px;
	}

	.confirm {
		background-color: #00B5DD !important;
		font-size: 28rpx;
		color: #ffffff;
		border: none !important;
	}

	/* list-tab */
	.swiper-box {
		display: flex;
		flex: 1;
		height: 1000px;
	}

	.swiper-item {
		display: flex;
		flex: 1;
		flex-direction: row;
	}

	.scroll-h {
		background-color: #ffffff;
		/* #ifdef H5 */
		width: 100%;
		/* #endif */
		height: 80rpx;
		display: flex;
		flex-direction: row;
		/* #ifndef APP-PLUS */
		white-space: nowrap;
		/* #endif */
	}

	.uni-tab-item {
		/* #ifndef APP-PLUS */
		display: inline-block;
		/* #endif */
		flex-wrap: nowrap;
		padding-left: 34rpx;
		padding-right: 34rpx;
	}

	.uni-tab-item-title {
		color: #646A74;
		font-size: 28rpx;
		height: 72rpx;
		line-height: 72rpx;
		flex-wrap: nowrap;
		/* #ifndef APP-PLUS */
		white-space: nowrap;
		/* #endif */
	}

	.uni-tab-item-title-active {
		display: inline-block;
		font-size: 32rpx;
		font-weight: bold;
		color: #283241;
		line-height: 72rpx;
		height: 72rpx;
		border-bottom: 3px solid #00C3CF;
	}

	.content {
		padding: 30rpx;
	}

	.dayread {
		position: relative;
		background-color: #F5F8FB;
	}

	.dayread image {
		width: 100%;
		max-height: 130px;
		border-radius: 8px 8px 0 0;
	}

	.dayread .label {
		position: absolute;
		left: 0;
		top: 0;
		background-image: url("https://staticfile-yj.obs.myhuaweicloud.com/Frame%20427318301.png");
		background-repeat: no-repeat;
		background-size: 100% 100%;
		width: 128rpx;
		height: 24px;
		line-height: 24px;
		text-align: center;
		font-size: 24rpx;
		color: #6C4913;
	}

	.dayread .title {
		display: block;
		color: #283241;
		font-size: 32rpx;
		line-height: 24px;
		max-height: 48px;
		font-weight: 500;
		padding: 0 30rpx 5px;
	}

	.column {
		padding: 0 30rpx;
	}
</style>